<script setup lang="ts">
import { ref, onMounted } from 'vue'
import routes from '@/router/modules/routes'
import { type Menu, getList } from '@/api/system/menu'
defineOptions({
  name: 'SystemMenu'
})

const tableData = ref<RouteConfigsTable[]>(routes)

const recursion = (dbList: Menu[], table: RouteConfigsTable[]) => {
  table.map((item) => {
    if (item.children && item.children.length > 0) {
      recursion(dbList, item.children)
    }
    const arr = dbList.filter((dbItem) => dbItem.name === item.name)
    if (arr.length > 0) {
      item.id = arr[0].id
    }
  })
}

onMounted(async () => {
  const dbList = await getList({} as Menu)
  if (dbList.success) {
    const m = tableData.value
    recursion(dbList.data, m)
    tableData.value = m
  }
})
</script>

<template>
  <div class="menu-container">
    <div class="page-header">
      <h2>菜单管理</h2>
    </div>

    <el-card>
      <!-- 菜单表格 -->
      <el-table
        :data="tableData"
        row-key="name"
        :tree-props="{ children: 'children' }"
        :indent="30"
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="meta.title" label="菜单标题" />
        <el-table-column prop="path" label="菜单路径" />
        <el-table-column prop="icon" label="图标">
          <template #default="{ row }">
            <Icon :icon="row.meta.icon"></Icon>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="授权">
          <template #default="{ row }">
            <span v-if="!row.children && row.meta.requiresAuth" class="text-amber-300"> 需要 </span>
            <span v-else-if="!row.children && !row.meta.requiresAuth" class="text-emerald-400">
              无需
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>
@/api/system/menu
